<template>
  <div>
    <h3>pictures</h3>
    <div id="maincate" class="maincate">
      <a href="#">风景</a>
      <a href="#">人物</a>
      <a href="#">宠物</a>
      <a href="#">夏日</a>
      <a href="#">云GIS</a>
      <a href="#">二三维一体化</a>
      <a href="#">大数据GIS</a>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped>
.maincate {
  width: 100%;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  /* -webkit-overflow-scrolling: touch; */
  text-align: center;
  background: #f78361;
  padding: 0px 5px;
  box-sizing: border-box;
}
.maincate a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  text-align: center;
  line-height: 30px;
  margin: 0 10px;
  border: 1px solid rgba(253, 7, 7, 0.1);
  box-shadow: 0 2px 5px 5px #d66645;
  border-radius: 10px;
  padding: 0 5px;
}
.maincate::-webkit-scrollbar {
  display: none;
}
</style>
